<template>
  <div class="naviRight">
    <div class="navigaRight">
      <li
        @mouseenter="onMouseOverC"
        @mouseleave="onMouseOutC"
        class="monavright"
      >
        <img
          v-if="MouseOverC == false"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/微信(1).png"
          alt=""
        />
        <img
          v-if="MouseOverC == true"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/微信.png"
          alt=""
        />
      </li>
      <li @mouseenter="onMouseOver" @mouseleave="onMouseOut" class="monavright">
          <img
          v-if="MouseOver == false"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/回到顶部y.png"
          alt=""
        />
        <img
          v-if="MouseOver == true"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/回到顶部1.png"
          alt=""
        />
      </li>
      <li @mouseenter="onMouseOverB"  @mouseleave="onMouseOutB" class="monavright">
         <img
          v-if="MouseOverB == false"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/回到顶部.png"
          alt=""
        />
        <img
          v-if="MouseOverB == true"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/回到顶部(2).png"
          alt=""
        />
      </li>
      <li @click="toTop" id="toTop"  @mouseenter="onMouseOverD"  @mouseleave="onMouseOutD">
         <img
         v-if="MouseOverD == false"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/回到顶部备份.png"
          alt=""
        />
         <img
         v-if="MouseOverD == true"
          src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/回到顶部备份).png"
          alt=""
        />
      </li>
    </div>
    <transition name="fade">
      <div class="dialogWindow dialogWindowC" v-show="shows">
        <div>分享好友</div>
        <!-- <span>移动端</span> -->
        <i class="iconfont icon-sanjiaoright"></i>
      </div>
    </transition>
    <transition name="fade">
      <div class="dialogWindow dialogWindowA" v-show="show">
        <img src="../../static/sc/ewm/ydd.png" alt="" />
        <span>移动端</span>
        <i class="iconfont icon-sanjiaoright"></i>
      </div>
    </transition>
    <transition name="fade">
      <div class="dialogWindow dialogWindowB" v-show="isShow">
        <img src="../../static/sc/ewm/wxkf.jpg" alt="" />
        <span>服务热线<br />400-921-9838</span>
        <i class="iconfont icon-sanjiaoright"></i>
      </div>
    </transition>
  </div>
</template> 

<script>
//juqery
export default {
  data() {
    return {
      shows: false,
      show: false,
      // show:true,
      isShow: false,
      // isShow:true

      MouseOver: false,
      MouseOverB: false,
      MouseOverC: false,
      MouseOverD:false,
    };
  },
  methods: {
    // 点击分享好友
    tomenuinvot() {
      let username = sessionStorage.getItem("userName");
      if (username) {
        this.$uniRouter.push({
          path: "/personal/myActive",
        });
      } else {
        this.$confirm("请先登录", "提示", {
          customClass: "message-logout",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            this.$uniRouter.push({
              path: "/login",
            });
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    onMouseOver() {
      this.show = true;
      this.MouseOver = true;
    },
    onMouseOut() {
      this.show = false;
      this.MouseOver = false;
    },
    onMouseOverC() {
      this.shows = true;
      this.MouseOverC = true;
    },
    onMouseOutC() {
      this.shows = false;
      this.MouseOverC = false;
    },
    onMouseOverB() {
      this.isShow = true;
      this.MouseOverB = true;
    },
    onMouseOutB() {
      this.isShow = false;
      this.MouseOverB = false;
    },
     onMouseOverD() {
      this.MouseOverD = true;
    },
    onMouseOutD() {
      this.MouseOverD = false;
    },
    toTop() {
      var _this = this;
      _this.timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;

        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        _this.isTop = true;
        if (osTop === 0) {
          clearInterval(_this.timer);
        }
      }, 30);
      $("#toTop").scrollTop(160);
    },
    // $(selector).scrollTop(160)
  },
};
</script>

<style lang="less" scoped>
.naviRight {
  // width: 208px;
  height: 278px;
  position: fixed;
  right: 30px;
  top: 420px;
  z-index: 999;
}
.navigaRight {
  width: 56px;
  height: 257px;
  position: fixed;
  right: 30px;
  top: 420px;
  z-index: 2;
  li:hover {
    background: #003c80;
  }
  li {
    list-style: none;
    float: left;
    width: 56px;
    height: 56px;
    margin-bottom: 11px;
    background: #dddddd;
    cursor: pointer;
    i {
      font-size: 32px;
      text-align: center;
      line-height: 56px;
      color: #fff;
      position: relative;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.dialogWindowA {
  width: 124px;
  height: 138px;
  position: absolute;
  right: 86px;
  bottom: 30%;
  -webkit-box-shadow: #bfbfbf 0 0 6px;
  box-shadow: #bfbfbf 0 0 12px;
  background: #fff;
  z-index: 999;
  img {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-top: 5px;
  }
  span {
    color: #000;
    text-align: center;
    font-size: 16px;
    position: relative;
    left: 36px;
  }
  i {
    position: absolute;
    right: -23px;
    font-size: 31px;
    top: 15px;
    color: #fff;
  }
}
.dialogWindowB {
  position: absolute;
  right: 86px;
  width: 124px;
  height: 150px;
  background: #fff;
  bottom: 0%;
  box-shadow: #bfbfbf 0 0 12px;
  -webkit-box-shadow: #bfbfbf 0 0 6px;
  z-index: 999;
  text-align: center;
  img {
    width: 110px;
    height: 110px;
    margin-left: 2px;
    margin-top: 5px;
  }
  span {
    color: #000;
    text-align: center;
    font-size: 12px;
    position: relative;
    top: -7px;
  }
  i {
    position: absolute;
    right: -23px;
    font-size: 31px;
    top: 15px;
    color: #fff;
  }
}
.dialogWindowC {
  width: 124px;
  height: 35px;
  background: #fff;
  box-shadow: 0px 2px 12px 0px rgba(191, 191, 191, 0.5);
  position: absolute;
  right: 86px;
  bottom: 84%;
  -webkit-box-shadow: #bfbfbf 0 0 6px;
  box-shadow: #bfbfbf 0 0 12px;
  background: #fff;
  z-index: 999;
  color: #000000;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  i {
    position: absolute;
    right: -17px;
    font-size: 23px;
    top: 1px;
    color: #fff;
  }
}
@media screen and (max-width: 1010px) {
  .monavright {
    display: none;
  }
  #toTop {
    display: none;
  }
  .naviRight {
    width: 50px !important;
    height: 37px !important;
    right: 0px !important;
    z-index: 999;
  }
  .navigaRight {
    right: -8px;
    z-index: 999;
    height: 56px;
  }
  .mofootBot {
    margin-top: 10px !important;
  }
  .navigaRight li:nth-child(3) {
    background: #003c80;
    width: 35px;
    height: 35px;
    i {
      line-height: 39px !important;
      font-size: 15px !important;
    }
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>